<template>
  <view>
    <BaseNavbar :title="title" />
    <view class="tab_box">
      <view
        class="tab_item"
        :class="i == tabIndex ? 'tab-active' : ''"
        v-for="(item, i) in tabList"
        :key="i"
        @click="tab(i)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="content">
      <view class="place-item" v-if="real_info_type == 0">
        <view class="place-title">
          个人信息
        </view>
        <view>
          <view class="title">
            <view>用户姓名</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入您的姓名"
            :disabled="edit"
            v-model="user_name"
          />
        </view>
        <view>
          <view class="title">
            <view class="title">用户昵称</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入您的昵称"
            v-model="nickname"
          />
        </view>
        <!-- <view>
          <view class="title">
            <view class="title">性别</view>
          </view>
          <BaseInput  :def="false"  placeholder="请输入您的性别" v-model="gender" />
        </view> -->
        <view>
          <view class="title">
            <view>手机号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的手机号"
            v-model="tel_no"
          />
        </view>
        <view>
          <view class="title">
            <view>身份证号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的身份证号"
            v-model="cert_id"
          />
        </view>
        <view>
          <view class="title">
            <view>用户邮箱</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的邮箱号"
            v-model="email"
          />
        </view>
        <view>
          <view class="title">
            <view>用户地址</view>
          </view>
          <view class="map-box">
            <BaseInput
              :def="false"
              placeholder="请输入详细位置"
              :disable="edit"
              v-model="choosedAddressInfo.address"
              width="70"
            />
            <view class="map-box-title" @click.stop="getSelectLocation">
              <BaseIcon name="map" color="#206cc5" />
              <view class="map-box-title-txt">地图搜索</view>
            </view>
          </view>
        </view>
      </view>
      <view class="place-item" v-if="real_info_type == 1">
        <view class="place-title">
          企业信息
        </view>
        <view>
          <view class="title">
            <view>企业名称</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入企业名称"
            :disabled="edit"
            v-model="reg_name"
          />
        </view>

        <view>
          <view class="title">
            <view>营业执照编号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入营业执照编号"
            v-model="license_code"
          />
        </view>
        <view>
          <view class="title">
            <view>证件照起始日期</view>
            <view class="necessary">*</view>
          </view>
          <TimeSelect
            times
            v-model="license_begin_date"
            placeholder="请选择证件照起始日期"
            :defaultTime="license_begin_date"
          />

          <!-- <view class="necessary">*</view> -->
        </view>
        <view>
          <view class="title">
            <view>证件照是否长期有效</view>
          </view>
          <view>
            <BaseRadio
              @changes="contactChange"
              :radioIndex.sync="contactIndex"
              :list="reasonList"
            />
          </view>

          <!-- <view class="necessary">*</view> -->
        </view>
        <view v-if="license_validity_type == 0">
          <view class="title">
            <view>证件照终止日期</view>
            <view class="necessary">*</view>
          </view>
          <TimeSelect
            v-model="license_end_date"
            times
            placeholder="请选择证件照终止日期"
            :defaultTime="license_end_date"
          />
        </view>
        <view>
          <view class="title">
            <view>经营范围</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入企业经营范围"
            :disabled="edit"
            v-model="business_scope"
            type="textarea"
          />
        </view>
        <view>
          <view class="title">
            <view>注册地址所在省市区</view>
            <view class="necessary">*</view>
          </view>
          <AreaSelect
            @changs="contactChanges"
            :defaultRegion="contact_defaultRegion"
            v-model="contact_selectArea"
            placeholder="请选择注册地址所在省市区"
          />
        </view>
        <view>
          <view class="title">
            <view>详细地址</view>
            <view class="necessary">*</view>
          </view>
          <view class="map-box">
            <BaseInput
              :def="false"
              placeholder="请输入详细注册地址"
              :disable="edit"
              v-model="choosedAddressInfoTwo.name"
              width="70"
            />
            <view class="map-box-title" @click.stop="getSelectLocationTwo">
              <BaseIcon name="map" color="#206cc5" />
              <view class="map-box-title-txt">地图搜索</view>
            </view>
          </view>
        </view>
      </view>
      <view class="place-item" v-if="real_info_type == 1">
        <view class="place-title">
          法人信息
        </view>
        <view>
          <view class="title">
            <view>法人姓名</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入法人的姓名"
            :disabled="edit"
            v-model="legal_name"
          />
        </view>
        <view>
          <view class="title">
            <view>法人手机号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入法人的手机号"
            v-model="legal_mp"
          />
        </view>
        <view>
          <view class="title">
            <view>法人身份证号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入法人的身份证号"
            v-model="legal_cert_no"
          />
        </view>
        <view>
          <view class="title">
            <view>法人证件照起始日期</view>
            <view class="necessary">*</view>
          </view>
          <TimeSelect
            times
            v-model="legal_cert_begin_date"
            placeholder="请选择起始日期"
            :defaultTime="legal_cert_begin_date"
          />

          <!-- <view class="necessary">*</view> -->
        </view>
        <view>
          <view class="title">
            <view>法人证件照是否长期有效</view>
          </view>
          <view>
            <BaseRadio
              @changes="legalChange"
              :radioIndex.sync="legalIndex"
              :list="reasonList"
            />
          </view>

          <!-- <view class="necessary">*</view> -->
        </view>
        <view v-if="legal_cert_validity_type == 0">
          <view class="title">
            <view>法人证件照终止日期</view>
            <view class="necessary">*</view>
          </view>
          <TimeSelect
            v-model="legal_cert_end_date"
            times
            placeholder="请选择结束时间"
            :defaultTime="legal_cert_end_date"
          />
        </view>
      </view>
      <view class="place-item" v-if="real_info_type == 1">
        <view class="place-title">
          联系人信息
        </view>
        <view>
          <view class="title">
            <view>联系人姓名</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            placeholder="请输入联系人姓名"
            :disabled="edit"
            v-model="contact_name"
          />
        </view>
        <view>
          <view class="title">
            <view>联系人的手机号号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入联系人的手机号"
            v-model="contact_mobile"
          />
        </view>
      </view>
      <view class="place-item">
        <view class="place-title">
          银行卡信息
        </view>
        <view>
          <view class="title">
            <view class="title">银行卡号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您本人的银行卡号"
            v-model="card_id"
          />
        </view>
        <view v-if="real_info_type == 1">
          <view class="title">
            <view>开户行所在省市区</view>
            <view class="necessary">*</view>
          </view>
          <AreaSelect
            @changs="changes"
            :defaultRegion="defaultRegion"
            v-model="selectArea"
            placeholder="请选择省市区"
          />
        </view>
        <view v-if="real_info_type == 1">
          <view class="title">
            <view class="title">银行卡所在银行编号</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的银行编号"
            v-model="comp_bank_code"
          />
        </view>
        <view v-if="real_info_type == 1">
          <view class="title">
            <view class="title">开户行名称</view>
            <view class="necessary">*</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的开户行名称"
            v-model="comp_branch_name"
          />
        </view>
        <view v-if="real_info_type == 1">
          <view class="title">
            <view class="title">开户行编码</view>
          </view>
          <BaseInput
            :def="false"
            :disabled="edit"
            placeholder="请输入您的开户行编码"
            v-model="comp_branch_code"
          />
        </view>
      </view>
      <view class="place-item" v-if="real_info_type == 1">
        <view>
          <text class="place-title">
            上传附件
          </text>
          <text class="place-text">
            (内容须包含三证合一证件照、法人身份证正面照、法人身份证反面照、开户银行许可证照。
            压缩 zip包后上传，最大限制为 9 M)
          </text>
        </view>
        <view>
          <view class="title">
            <view>上传文件</view>
            <view class="necessary">*</view>
            <text class="place-text">
              （{{
                attach_file || ad.status
                  ? ad.status
                    ? ad.status
                    : '已上传'
                  : '选择上传文件(zip文件)'
              }}）
            </text>
          </view>
          <view class="content-box-txt">
            <UploadAll :size="9" @upload="upload" />
          </view>
        </view>
      </view>
      <view class="btn" v-if="!edit">
        <view>
          <BaseButton type="primary" @onClick="confirmAdd">确 认</BaseButton>
        </view>
      </view>
    </view>

    <BaseModal :show.sync="isModal" :isShowCancel="false" title="温馨提示">
      <view slot="default" class="noun">
        <view>1.个人企业认证只能选择一个</view>
        <view>2.如果选择了其中一个就不能再做别的认证</view>
        <view>3.如果需要修改请联系相关负责人</view>
      </view>
    </BaseModal>
  </view>
</template>

<script>
import BaseButton from '@/components/base/BaseButton.vue'
import BaseInput from '@/components/base/BaseInput.vue'
import BaseNavbar from '@/components/base/BaseNavbar.vue'
import BaseUpload from '@/components/base/BaseUpload.vue'
import AreaSelect from '@/components/common/AreaSelect.vue'
import TimeSelectHour from '@/components/common/TimeSelectHour.vue'
import BasePopup from '@/components/base/BasePopup.vue'
import TypeSelectPopup from '@/components/common/TypeSelectPopup.vue'
import { locationMixin } from '@/mixins/locationMixin'
import BaseIcon from '../../components/base/BaseIcon.vue'
import TimeSelect from '@/components/common/TimeSelect.vue'
import BaseRadio from '../../components/base/BaseRadio.vue'
import BaseModal from '@/components/base/BaseModal.vue'
import UploadAll from '../components/UploadAll.vue'
export default {
  components: {
    BaseNavbar,
    BaseInput,
    BaseUpload,
    BaseButton,
    AreaSelect,
    TimeSelectHour,
    BasePopup,
    TypeSelectPopup,
    BaseIcon,
    TimeSelect,
    BaseRadio,
    BaseModal,
    UploadAll,
  },
  mixins: [locationMixin],
  data() {
    return {
      title: '实名认证',
      user_name: '', //用户名称
      tel_no: '', //用户电话
      email: '', //用户邮箱
      location: '', //用户地址
      gender: '', //用户性别
      nickname: '', //用户昵称
      cert_id: '', //用户身份证号
      card_id: '', //银行卡号
      tabList: [
        { name: '个人认证', status: 0 },
        { name: '企业认证', status: 1 },
      ],
      tabIndex: 0,
      Add: false,
      isModal: false, //BaseModal弹窗
      real_info_type: 0,
      reg_name: '', //企业名称
      business_scope: '', //经营范围
      license_code: '', //营业执照编号
      license_validity_type: 0, //营业执照证件有效类型
      license_begin_date: '', //营业执照有效期起始日期
      license_end_date: '', //营业执照有效期结束日期
      reg_prov_id: '', //注册地址省编码
      reg_area_id: '', //注册地址市编码
      reg_district_id: '', //注册地址区编码
      reg_detail: '', //注册详细地址
      legal_name: '', //法人姓名
      legal_mp: '', //法人手机号
      legal_cert_type: '00', //法人证件类型
      legal_cert_no: '', // 法人证件号码
      legal_cert_validity_type: 0, //法人证件有效类型
      legal_cert_begin_date: '', //法人证件有效期开始日期
      legal_cert_end_date: '', //法人证件有效期结束日期
      contact_name: '', //联系人姓名
      contact_mobile: '', //联系人手机号
      contact_defaultRegion: [], //注册默认地址
      comp_bank_code: '', //银行编号
      comp_branch_name: '', //支行名称
      comp_branch_code: '', //支行编号
      contact_selectArea: '',
      contactIndex: 0,
      legalIndex: 0,
      reasonList: [
        {
          title: '非长期有效',
          name: '0',
          disabled: false,
          selectIndex: 0,
        },
        {
          title: '长期有效',
          name: '1',
          disabled: false,
          selectIndex: 1,
        },
      ],
      selectArea: '',
      defaultRegion: [], //默认区域
      prov_id: '',
      area_id: '',
      edit: false,
      attach_file: '',
      ad: {
        url: '', //广告图片链接
        name: '',
        size: '',
        status: '',
      },
    }
  },
  methods: {
    // 打开文件选择器
    upload(status, e) {
      this.ad.status = status
      this.attach_file = e?.url || ''
      this.ad.size = e?.size || ''

      console.log('🚀 ~ this.ad', this.ad.size / 1024 / 1024, e)
    },
    padWithZeroes(number) {
      // v2
      // while (inputString.length < 6) {
      //   inputString = inputString + '0'
      // }
      //v1
      const numberString = number.toString()

      // 使用 padStart 在前面补零，确保总长度为4
      const paddedNumber = numberString.padStart(4, '0')

      return paddedNumber
    },

    changes(e) {
      this.prov_id = this.padWithZeroes(e.province.value)
      this.area_id = this.padWithZeroes(e.city.value)
      console.log(
        '变化的数据',
        this.prov_id,
        this.area_id,
        this.selectArea,
        e.province.value,
      )
    },
    contactChanges(e) {
      this.reg_prov_id = this.padWithZeroes(e.province.value)
      this.reg_area_id = this.padWithZeroes(e.city.value)
      this.reg_district_id = this.padWithZeroes(e.area.value)
      console.log('变化的数据', e)
    },

    change(e) {
      console.log('change', e)
      this.cert_validity_type = e
    },
    contactChange(e) {
      console.log('change', e)
      this.license_validity_type = e
    },
    legalChange(e) {
      console.log('change', e)
      this.legal_cert_validity_type = e
    },
    text(a) {
      let b = a.split('-')
      let str = ''
      for (let i = 0; i < b.length; i++) {
        str = str + b[i]
      }
      return str
    },
    formatDate(inputDate) {
      // 检查输入日期是否有效
      if (inputDate) {
        if (inputDate.length !== 8) {
          return 'Invalid date format'
        }

        // 将输入日期按照指定格式进行转换
        const formattedDate = `${inputDate.slice(0, 4)}-${inputDate.slice(
          4,
          6,
        )}-${inputDate.slice(6)}`

        return formattedDate
      } else {
        return ''
      }
    },
    confirmAdd() {
      let data = {}
      if (this.real_info_type == 0) {
        if (!this.user_name) return this.isShowErr(`请选输入姓名~`)
        if (!this.tel_no) return this.isShowErr('请选输入手机号~')
        if (!this.cert_id) return this.isShowErr('请选输入身份证号~')
        if (!this.card_id) return this.isShowErr('请选输入银行卡号~')
        data = {
          real_info_type: 0, //个人认证
          location: this.location, //具体地址
          user_name: this.user_name,
          tel_no: this.tel_no,
          email: this.email,
          location: this.location,
          gender: this.gender,
          nickname: this.nickname,
          cert_id: this.cert_id,
          card_id: this.card_id,
          bank_acct_type: 2, //银行卡对私
        }
      } else if (this.real_info_type == 1) {
        this.reg_detail = this.choosedAddressInfoTwo.name
        if (!this.reg_name) return this.isShowErr(`请选输入企业名称~`)
        if (!this.license_code) return this.isShowErr(`请选输入营业执照编号~`)
        if (!this.license_begin_date)
          return this.isShowErr(`请选输入营业执照有效期起始日期~`)
        if (this.license_validity_type == 0) {
          if (!this.license_end_date)
            return this.isShowErr(`请选输入营业执照有效期结束日期~`)
          if (this.license_end_date <= this.license_begin_date)
            return this.isShowErr('营业执照结束日期需大于营业执照开始日期~')
        }
        if (!this.business_scope) return this.isShowErr(`请输入企业经营范围~`)
        if (!this.contact_selectArea)
          return this.isShowErr(`请选输入注册地址省市区编码~`)
        if (!this.reg_detail) return this.isShowErr(`请选输入注册详细地址~`)
        if (!this.legal_name) return this.isShowErr(`请选输入法人姓名~`)
        if (!this.legal_mp) return this.isShowErr(`请选输入法人手机号~`)
        if (!this.legal_cert_no) return this.isShowErr(`请选输入法人证件号码~`)
        if (!this.legal_cert_begin_date)
          return this.isShowErr(`请选输入法人证件有效期开始日期~`)
        if (this.legal_cert_validity_type == 0) {
          if (!this.legal_cert_end_date)
            return this.isShowErr(`请选输入法人证件有效期结束日期~`)
          if (this.legal_cert_end_date <= this.legal_cert_begin_date)
            return this.isShowErr('法人身份证结束日期需大于法人身份证开始日期~')
        }
        if (!this.contact_name) return this.isShowErr(`请选输入联系人姓名~`)
        if (!this.contact_mobile) return this.isShowErr(`请选输入联系人手机号~`)
        if (!this.card_id) return this.isShowErr('请选输入银行卡号~')
        if (!this.selectArea) return this.isShowErr('请选输入银行卡所在省区~')
        if (!this.comp_bank_code) return this.isShowErr(`请选输入银行编号~`)
        if (!this.comp_branch_name) return this.isShowErr(`请选输入开户行名称~`)
        if (!this.comp_branch_name) return this.isShowErr(`请选输入开户行名称~`)
        if (!this.attach_file) return this.isShowErr(`请上传附件~`)
        if (this.ad.size / 1024 / 1024 > 9) return this.isShowErr(`文件大于9M~`)

        let license_begin_date = this.text(this.license_begin_date)
        let license_end_date = this.text(this.license_end_date)
        let legal_cert_begin_date = this.text(this.legal_cert_begin_date)
        let legal_cert_end_date = this.text(this.legal_cert_end_date)
        data = {
          real_info_type: 1, //企业认证
          comp_reg_name: this.reg_name, //企业名称
          comp_license_code: this.license_code, //营业执照编号
          comp_license_validity_type: this.license_validity_type, //营业执照证件有效类型
          comp_license_begin_date: license_begin_date, //营业执照有效期起始日期
          comp_business_scope: this.business_scope, //营业执照有效期起始日期
          comp_reg_prov_id: this.reg_prov_id, //注册地址省编码
          comp_reg_area_id: this.reg_area_id, //注册地址市编码
          comp_reg_district_id: this.reg_district_id, //注册地址区编码
          comp_reg_detail: this.reg_detail, //注册详细地址
          comp_legal_name: this.legal_name, //法人姓名
          tel_no: this.legal_mp, //法人手机号
          comp_legal_cert_no: this.legal_cert_no, // 法人证件号码
          comp_legal_cert_validity_type: this.legal_cert_validity_type, //法人证件有效类型
          comp_legal_cert_begin_date: legal_cert_begin_date, //法人证件有效期开始日期
          comp_contact_name: this.contact_name, //联系人姓名
          comp_contact_mobile: this.contact_mobile, //联系人手机号
          card_id: this.card_id, //银行卡号
          comp_bank_code: this.comp_bank_code, //银行编号
          comp_branch_name: this.comp_branch_name, //支行名称
          comp_branch_code: this.comp_branch_code, //支行编号
          bank_acct_type: 1, //银行卡对公
          prov_id: this.prov_id, //银行所在省
          area_id: this.area_id, //银行所在区
          prov_city_area: this.selectArea, //银行所在省市区
          comp_prov_city_area: this.contact_selectArea, //注册地址所在省市区
          file_path: this.attach_file, //上传文件地址
        }
        if (this.license_validity_type == 0) { 
          data['comp_license_end_date'] = license_end_date
        }
        if (this.legal_cert_validity_type == 0) {
          data['comp_legal_cert_end_date'] = legal_cert_end_date
        }
      }

      // let rtnData = null;
      this.$u.api
        .setauthRealInfo(data)
        .then((res) => {
          this.isShowSuccess(this.title + '成功', 1, () => {}, true)
        })
        .catch((err) => {
          console.log(err.msg)
          this.isShowErr(err.msg)
        })
      // rtnData.then((res) => {
      //     // this.isShowSuccess(this.title + "成功", 1, () => { }, true);
      //     if(res.msg=='认证并且绑卡成功'){
      //         this.isShowSuccess(this.title + "成功", 1, () => { }, true);
      //     }
      //     console.log('返回信息',res)
      // });
    },
    /* tab切换 */
    tab(i) {
      if (this.Add) {
        this.isModal = true
        return
      }
      this.tabIndex = i
      this.real_info_type = i
    },
  },
  onLoad(opt) {
    // console.log("🚀 ~  this.competeList ", this.competeList);
    if (opt.from == 'edit') {
      this.edit = true
      console.log('编辑进来的')
    }
    this.$u.api.getRealInfo().then((res) => {
      console.log('实名信息', res)
      let data = res
      this.location = data?.location || ''
      this.tel_no = data?.tel_no || ''
      this.email = data?.email || ''
      this.gender = data?.gender || ''
      this.cert_id = data?.cert_id || ''
      this.cert_validity_type = data?.cert_validity_type || 0
      this.user_name = data?.user_name || ''
      this.card_id = data?.card_id || ''
      // this.gender = data?.gender||''
      this.nickname = data?.nickname || ''
      this.prov_id = data?.prov_id || ''
      this.area_id = data?.area_id || ''
      this.real_info_type = data?.real_info_type || 0
      if (this.real_info_type == 1) {
        this.tabIndex = 1
      }
      //   this.real_info_type=1
      this.selectArea = data?.prov_city_area
      console.log('🚀 ~  this.opt ', this.cert_begin_date)
      this.reg_name = data?.comp_name || '' //企业名称
      this.license_code = data?.comp_license_code || '' //营业执照编号
      this.license_validity_type = data?.comp_license_validity_type || 0 //营业执照证件有效类型
      this.license_begin_date = this.formatDate(data?.comp_license_begin_date)
      if (this.license_validity_type == 1) {
        this.contactIndex = 1
      } else {
        this.contactIndex = 0
        this.license_end_date = this.formatDate(data?.comp_license_end_date)
      }
      this.business_scope = data?.comp_business_scope || '' //注册地址省编码
      this.reg_prov_id = data?.comp_reg_prov_id || '' //注册地址省编码
      this.reg_area_id = data?.comp_reg_area_id || '' //注册地址市编码
      this.reg_district_id = data?.comp_reg_district_id || '' //注册地址区编码
      this.contact_selectArea = data?.comp_prov_city_area
      this.choosedAddressInfoTwo = {
        name: data?.comp_reg_detail,
      }
      // this.reg_detail = data?.comp_reg_detail || '' //注册详细地址
      this.legal_name = data?.user_name || '' //法人姓名
      this.legal_mp = data?.tel_no || '' //法人手机号
      this.legal_cert_no = data?.cert_id || '' // 法人证件号码
      this.legal_cert_validity_type = data?.cert_validity_type || 0 //法人证件有效类型
      this.legal_cert_begin_date = this.formatDate(data?.cert_begin_date)
      if (this.legal_cert_validity_type == 1) {
        this.legalIndex = 1
      } else {
        this.legalIndex = 0
        this.legal_cert_end_date = this.formatDate(data?.cert_end_date)
      }
      this.contact_name = data?.comp_contact_name || '' //联系人姓名
      this.contact_mobile = data?.comp_contact_mobile || '' //联系人手机号
      this.comp_bank_code = data?.comp_bank_code || '' //银行编号
      this.comp_branch_name = data?.comp_branch_name || '' //支行名称
      this.comp_branch_code = data?.comp_branch_code || '' //支行编号
      this.attach_file = data?.comp_attach_file || '' //附件地址
      if (this.user_name || this.reg_name) {
        this.isModal = false
        this.Add = true
      }
    })
  },
}
</script>

<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.url-txt {
  width: 95%;
  word-break: break-all;
  padding: 10rpx 20rpx;
  white-space: wrap;
  display: flex;
  align-items: center;
  min-height: 34px;
  background-color: $pageBgColor;
  margin-bottom: 20rpx;
}
.remitatance {
  // margin: 0 30rpx;
}
.tab_box {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10rpx 30rpx;
  margin-bottom: 20rpx;

  .tab_item {
    flex: 1;
    padding: 10rpx 20rpx;
    text-align: center;
    border: 2rpx solid #0eade2;
    color: #0eade2;
  }
  .tab-active {
    color: #fff;
    background-color: #0eade2;
  }
  .tab_item:first-child {
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
  }
  .tab_item:last-child {
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
}
.noun {
  font-size: 25rpx;
  > view {
    margin: 20rpx 0;
  }
}
.content {
  padding: 0 30rpx 30rpx 30rpx;
  .image {
    height: 200rpx;
    width: 500rpx;
    border: 1px solid #000;

    image {
      width: 100%;
      height: 100%;
    }
  }

  > view {
    // margin-bottom: 50rpx;
  }
  .place-title {
    border-bottom: 2rpx solid #f0f0f0;
    // border-left: 2rpx solid #f0f0f0;
    // border-right: 2rpx solid #f0f0f0;
    // border-top-left-radius: 10rpx;
    // border-top-right-radius: 10rpx;
    // background-color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    // margin:20rpx 0;
    font-weight: bold;
  }
  .place-text {
    font-weight: none;
    color: #999;
  }
  .place-item {
    padding: 20rpx 15rpx 50rpx 15rpx;
    border-radius: 15rpx;
    border: 2rpx solid #f0f0f0;
    background-color: #fff;
    margin-bottom: 20rpx;
    // border:2rpx solid red;
  }
  .place-file {
    width: 100%;
    display: flex;
    ::v-deep .u-input {
      width: 500rpx;
    }
  }
  .row-flex {
    display: flex;
    align-items: center;
    &-item {
      display: flex;
      align-items: center;

      &-title {
        flex-shrink: 0;
        font-size: $font-size-middle;
      }

      &:last-child {
        margin-left: 10rpx;
      }
    }
  }
  .title {
    // border: 1px solid #000;
    position: relative;
    display: flex;
    align-items: center;
    color: $textBlack;
    font-size: $font-size-middle;
    font-weight: bold;
    margin: 20rpx 0;

    .title_text {
      margin-top: 30rpx;
    }

    .necessary {
      color: red;
      margin-left: 4rpx;
    }
  }

  .btn {
    margin-top: 50rpx;
    .examine {
      margin-top: 40rpx;
    }
  }
  .primary {
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $textWhite;
    background: linear-gradient(268deg, #206bc5 0%, #0eade2 99%);
  }
  .volume {
    position: relative;

    &-mark {
      position: absolute;
      top: 0;
      right: 0;
      width: 60rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
    }
  }

  .time {
    display: flex;

    .end-time {
      margin-left: 20rpx;
    }
  }
}

.time {
  display: flex;

  .end-time {
    margin-left: 20rpx;
  }
}

.map-box ::v-deep .u-input__input {
  font-size: 22rpx !important;
}

.map-box {
  position: relative;
  height: 80rpx;
  color: $themeColor;

  &-title {
    height: 80rpx;
    display: flex;
    align-items: center;
    position: absolute;
    right: 30rpx;
    z-index: 99;
    top: 0;

    &-txt {
      margin-left: 10rpx;
      margin-top: -4rpx;
    }
  }
}
::v-deep button {
  color: $textWhite !important;
  background: linear-gradient(268deg, #206bc5 0%, #0eade2 99%) !important;
}
</style>
